﻿<div class="ui-widget-content">
    <h3>Themming - Draggable e Selectable</h3>
    <p>
        Quando o método draggable é invocado, o objeto passa a ter a classe <span class="codigo">ui-draggable</span>.
        Quando o draggable está sendo arrastado, ele também passa a ter a classe <span class="codigo">ui-draggable-dragging</span>.
    </p>
    <p>
        Quando o método selectable é invocado, o objeto passa a ter a classe <span class="codigo">ui-selectable</span>
        e os filhos a classe <span class="codigo">ui-selectee</span>. Os filhos selecionados também têm a classe <span class="codigo">ui-selected</span> e os
        que estão sendo selecionados, a classe <span class="codigo">ui-selecting</span>.
    </p>
    <p>Para você ver, mudamos a CSS deste slide e acrescentamos isso:</p>

    <pre>#ui_classes_troca_cor .ui-draggable { background-color: cyan; }
#ui_classes_troca_cor .ui-draggable-dragging { background-color: blue; }
#ui_classes_troca_cor .ui-selectable { background-color: lime; }
#ui_classes_troca_cor .ui-selectee { background-color: yellow; }
#ui_classes_troca_cor .ui-selecting { background-color: gray; }
#ui_classes_troca_cor .ui-selected { background-color: red; }</pre>

    <p>E então temos um draggable e um selectable aqui:</p>
    <div id="ui_classes_troca_cor">
        <div class="draggable_free" style="width: 300px; padding: 10px">
            <p>Me arraste por aí.</p>
            <p>Me leve para qualquer lugar.</p>
        </div>
        <ol id="selectable_theming">
            <li>Elemento 1</li>
            <li>Elemento 2</li>
            <li>Elemento 3</li>
            <li>Elemento 4</li>
            <li>Elemento 5</li>
            <li>Elemento 6</li>
        </ol>
    </div>

    <style type="text/css" rel="stylesheet">
        #ui_classes_troca_cor .ui-draggable { background-color: cyan; }
        #ui_classes_troca_cor .ui-draggable-dragging { background-color: blue; }
        #ui_classes_troca_cor .ui-selectable { background-color: lime; }
        #ui_classes_troca_cor .ui-selectee { background-color: yellow; }
        #ui_classes_troca_cor .ui-selecting { background-color: gray; }
        #ui_classes_troca_cor .ui-selected { background-color: red; }
    </style>

    <script type="text/javascript">
        $("#selectable_theming").selectable();
    </script>
</div>